<template>
	<view class="product-box pa-12 br-12 bg-color-item"
		v-show="product.collectionlist && product.collectionlist.length">
		<!-- <view class="flex flex-js-sb flex-ai-center">
			<text class="title font-color-black">藏品描述</text>
			<text class="font-size-12 font-color-minor">您可能抽到以下作品中的1个</text>
		</view> -->
		<view class="flex flex-ai-center">
			<view class="flex flex-ai-center ">
				<w-title-color title="藏品描述" />
				<!-- <w-image src="/static/icon/cpms-right.png" width="20" height="13"></w-image> -->
			</view>
			<view class="font-color-666 font-size-12 ml-8">{{handleLang('您可能抽到以下作品中的 1 个')}}</view>
		</view>
		<view class="pa-6 flex itme mt-12 flex-ai-center" v-for="item in product.collectionlist" :key="item.id">
			<w-image radius="4" :src='item.listimg' width="59" height="59"></w-image>
			<view class="flex-1 flex flex-dir-col flex-js-sb pl-8 ptb-6" style="height:118rpx">
				<text class="font-size-13 font-color-textPrimary font-w-500">{{item.name}}</text>
				<view class="flex font-size-12">
					<view class="">
						<text class="font-color-minor">{{handleLang('概率：')}}</text>
						<text class="font-color-textPrimary">{{item.probability}}%</text>
					</view>
					<view class="ml-20">
						<text class="font-color-minor">{{handleLang('总量：')}}</text>
						<text class="font-color-textPrimary">{{item.show_total_num}}{{handleLang('份')}}</text>
					</view>
				</view>
			</view>
			<w-image radius="4" :src='item.rarity_icon' width="55" height="55"></w-image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "w-product-box",
		props: {
			product: {
				type: Object,
				defaul() {
					return {
						batch: {},
						issuer: {},
						series: {},
						collectionlist: []
					}
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.product-box {
		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: #222222;
			margin-left: 6rpx;
			margin-right: 8rpx;
		}

		.itme {
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			border: 2rpx solid #f5f5f5;
		}
	}
</style>